<template>
    <el-row class="widget-col widget-view"
            :class="{
      active: selectWidget.key && selectWidget.key == element.key
    }"
            @click.native.stop="handleSelectWidget(index)"
            type="flex"
            :gutter="element.options.gutter || 0"
            :justify="element.options.justify"
            :align="element.options.align"
    >
        <el-col v-for="(item, index) in element.columns" :key="index"
                :span="item.span || 0" >
            <draggable
                    v-model="item.list"
                    v-bind="{group:'people', ghostClass: 'ghost',animation: 200, handle: '.drag-widget'}"
                    :no-transition-on-drag="true"
                    @add="handleWidgetColAdd($event, element, index)"
            >

                <transition-group name="fade" tag="div" class="widget-col-list">
                    <template v-for="(col, colindex) in item.list" v-if="col && col.key">

                        <widget-col-item
                                v-if="col.type === 'grid'"
                                :key="col.key"
                                :element="col"
                                :select.sync="selectWidget"
                                :index="colindex" :data="item"
                                @select-change="handleSelectChange($event, item)"
                        >
                        </widget-col-item>
                        <widget-col-item
                                v-if="col.type == 'subTable' "
                                :key="col.key"
                                :element="col"
                                :select.sync="selectWidget"
                                :index="colindex" :data="item"
                                @select-change="handleSelectChange($event, item)">
                        </widget-col-item>
                        <widget-table
                                v-else-if="col.type == 'table'"
                                :key="col.key"
                                :element="col"
                                :select.sync="selectWidget"
                                :index="colindex" :data="item"
                                @select-change="handleSelectChange($event, item)"
                        >
                        </widget-table>

                        <widget-form-item
                                v-else
                                :key="col.key"
                                :element="col"
                                :select.sync="selectWidget"
                                :parentContainer="element"
                                :index="colindex" :data="item"
                                @select-change="handleSelectChange($event, item)"
                        >
                        </widget-form-item>
                    </template>
                </transition-group>

            </draggable>
        </el-col>

        <div class="widget-view-action widget-col-action" v-if="selectWidget.key == element.key">

            <i class="iconfont icon-trash" @click.stop="handleWidgetDelete(index)"></i>
        </div>

        <div class="widget-view-drag widget-col-drag" v-if="selectWidget.key == element.key">
            <i class="iconfont icon-drag drag-widget"></i>
        </div>
    </el-row>
</template>

<script>
    import WidgetFormItem from './WidgetFormItem'
    import WidgetTable from './WidgetTable'
    import Draggable from 'vuedraggable'
    import {genID } from  './router/utils.js'

    export default {
        name: 'widget-col-item',
        components: {
            Draggable,
            WidgetFormItem,
            WidgetTable
        },
        props: ['element', 'select', 'index', 'data','parentContainer'],
        data () {
            return {
                selectWidget: this.select
            }
        },
        methods: {
            handleSelectWidget (index) {
                this.selectWidget = this.data.list[index]
            },
            handleWidgetDelete (index) {
                if (this.data.list.length == 1) {
                    this.$emit('select-change', -1)
                } else {
                    if (this.data.list.length - 1 == index) {
                        this.$emit('select-change', index - 1)
                    } else {
                        this.$emit('select-change', index)
                    }
                }

                this.data.list.splice(index, 1)
            },

            handleWidgetColAdd ($event, row, colIndex) {
                const newIndex = $event.newIndex
                const oldIndex = $event.oldIndex
               var list=  row.columns[colIndex].list;
                const key = new Date().getTime() + ''
                this.$set(row.columns[colIndex].list, newIndex, {
                    ...row.columns[colIndex].list[newIndex],
                    options: {
                        ...row.columns[colIndex].list[newIndex].options,
                        remoteFunc: row.columns[colIndex].list[newIndex].options.remoteFunc || 'func_'+key
                    },
                    novalid: {
                        ...row.columns[colIndex].list[newIndex].novalid,
                    },
                    key,
                    model: row.columns[colIndex].list[newIndex].model ? row.columns[colIndex].list[newIndex].model : row.columns[colIndex].list[newIndex].type + '_' + key,
                    rules: row.columns[colIndex].list[newIndex].rules ? [...row.columns[colIndex].list[newIndex].rules] : []
                })

                if (Object.keys(row.columns[colIndex].list[newIndex]).includes('columns')) {
                    this.$set(row.columns[colIndex].list, newIndex, {
                        ...row.columns[colIndex].list[newIndex],
                        columns: [...row.columns[colIndex].list[newIndex].columns.map(item => ({
                            ...item,
                            list: [...item.list]
                        }))]
                    })
                }

                if (Object.keys(row.columns[colIndex].list[newIndex].options).includes('options')) {
                    this.$set(row.columns[colIndex].list, newIndex, {
                        ...row.columns[colIndex].list[newIndex],
                        options: {
                            ...row.columns[colIndex].list[newIndex].options,
                            options: [...row.columns[colIndex].list[newIndex].options.options.map(item => ({
                                ...item
                            }))]
                        }
                    })
                }
                this.$forceUpdate();

                this.selectWidget = row.columns[colIndex].list[newIndex]
            },
            handleSelectChange (index, item) {
                setTimeout(() => {
                    index >=0 ? (this.selectWidget = item.list[index]) : (this.selectWidget = {})
                })
            }
        },
        watch: {
            select (val) {
                this.selectWidget = val
            },
            selectWidget: {
                deep: true,
                handler (val) {
                    this.$emit('update:select', val)
                }
            },
        }
    }
</script>

<style lang="scss">
    .fade-enter-active, .fade-leave-active {
        transition: opacity .3s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }

</style>
